<template>
	<view class="viewimg">
		<view>
			<echarts :option="option" style="height: 300px;"></echarts>
			<button @click="updateClick">更新数据</button>
		</view>
		<view>
			<echarts :option="optionYL" style="height: 300px;"></echarts>
		</view>
		<view>
		</view>
	</view>
</template>

<script>
	import { getWaterDetails} from './api/api.js'
	export default {
		data() {
			return {
				stcd: "",
				stnm: "",
				option: {},
				optionYL: {},
			};
		},
		onLoad(options) {
			this.stcd = options.stcd;
			this.stnm = options.stnm;
			uni.setNavigationBarTitle({
				title: this.stnm + "过程线"
			});
			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#1296db" //底部背景色
			})
		},
		
		mounted() {
			this.initData();
		},
		methods: {
			initData() {
				var data = {
					STIME: new Date(new Date().addDate("h", -8)).Format("YYYY-MM-DD hh:mm:00"),
					ETIME: new Date(new Date().addDate("h", 0)).Format("YYYY-MM-DD hh:mm:00"),
					STCD: this.stcd,
					DAYHOUR:"HOUR"
				};
				
				var _param = {}
				_param.data = data;
				getWaterDetails(_param).then(res => {
					var listData = res.data;
					this.list = listData;
					var max_min_Name = "水位";
					
					var m = [];
					
					var chartName = []; //控件元素名称
					var chartTM = []; //时间序列
					var chartValue = []; //时间序列
					var liststr = ""; //拼装表格
					
					var strNote= [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "水位","codename": "UPZ","tableV":"12","isShow":true,"width":"60%"},{"name": "警戒水位","codename": "WRZ","tableV":"0","isShow":false,"width":"30%"},{"name": "保证水位","codename": "GRZ","tableV":"0","isShow":false,"width":"30%"}];
					
					var strChartsName = "水位";
					//绘制过程线颜色设置
					var LineColor = ['#0A34E2','#FF6300','#F81B0E'];
					if(listData.length > 0 && undefined != listData[0].DWZ && 0 != listData[0].DWZ){
						if(undefined != listData[0].UPZ){
							strNote = [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "上游水位","codename": "UPZ","tableV":"12","isShow":true,"width":"60%"},{"name": "下游水位","codename": "DWZ","tableV":"1","isShow":false,"width":"30%"}];//,{"name": "警戒水位","codename": "WRZ","tableV":"0","isShow":false,"width":"30%"}
							LineColor = ['#0A34E2','#06DAC3','#FF6300','#F81B0E'];
							strChartsName = "上游水位";
						}else{
							strNote = [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "水位","codename": "DWZ","tableV":"12","isShow":true,"width":"60%"},{"name": "警戒水位","codename": "WRZ","tableV":"0","isShow":false,"width":"30%"},{"name": "保证水位","codename": "GRZ","tableV":"0","isShow":false,"width":"30%"}];
						}
					}
					
					this.option = this.chartsUtils.chartSW(listData,strNote,LineColor,strChartsName);
					
					
					this.initDataYL();
				})
			},
			initDataYL() {
				var listData = this.list;
				var m = [];
				var chartName = []; //控件元素名称
				var chartTM = []; //时间序列
				var chartValue = []; //时间序列
				var liststr = ""; //拼装表格
				
				var strNote= [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "雨量","codename": "UPZ","tableV":"12","isShow":true,"width":"60%"}];
				
				var strChartsName = "雨量";
				// //绘制过程线颜色设置
				 var LineColor = ['#D84C29'];
				// if(listData.length > 0 && undefined != listData[0].DWZ && 0 != listData[0].DWZ){
				// 	if(undefined != listData[0].UPZ){
				// 		strNote = [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "上游水位","codename": "UPZ","tableV":"12","isShow":true,"width":"60%"},{"name": "下游水位","codename": "DWZ","tableV":"1","isShow":false,"width":"30%"}];//,{"name": "警戒水位","codename": "WRZ","tableV":"0","isShow":false,"width":"30%"}
				// 		LineColor = ['#0A34E2','#06DAC3','#FF6300','#F81B0E'];
				// 		strChartsName = "上游水位";
				// 	}else{
				// 		strNote = [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "水位","codename": "DWZ","tableV":"12","isShow":true,"width":"60%"},{"name": "警戒水位","codename": "WRZ","tableV":"0","isShow":false,"width":"30%"},{"name": "保证水位","codename": "GRZ","tableV":"0","isShow":false,"width":"30%"}];
				// 	}
				// }
				
				this.optionYL = this.chartsUtils.chartYL(listData,strNote,LineColor,strChartsName);
		
			},
			/**
			 * 更新数据
			 */
			updateClick() {
				this.optionYL = {
					notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(220, 220, 220, 0.8)'
						}
					}]
				};
			}
		}
	};
</script>
<style>
	.viewimg {
		height: 100%;
		/* background: #d1e9e9; */
	}
</style>
